import React, { useState, useEffect } from 'react'
import { Select, Switch } from 'antd';
import pubsub from 'pubsub-js'
import "./index.scss"

const { Option } = Select;

export default function MenuTop() {
  const [switchFlag, setSwitchFlag] = useState(true)
  const [formVal, setFormVal] = useState("zh-CHS")
  const [toVal, setToVal] = useState("en")

  useEffect(() => {
    pubsub.publish('getFormToVal', { formVal, toVal , switchFlag})
  })

  function handleSwitch(flag) {
    setSwitchFlag(flag)
  }

  return (
    <div className='MenuTop'>
      <Select
        disabled={switchFlag}
        defaultValue="zh-CHS"
        style={{
          width: 120,
        }}
        onChange={(val) => setFormVal(val)}
      >
        <Option value="zh-CHS">中文</Option>
        <Option value="yue">粤语</Option>
        <Option value="en">英语</Option>
        <Option value="ko">韩文</Option>
        <Option value="zh-CHT">中文繁体</Option>
        <Option value="fr">法文</Option>
        <Option value="es">西班牙文</Option>
        <Option value="it">意大利文</Option>
      </Select>

      <Switch onClick={handleSwitch} checkedChildren="自动检查" unCheckedChildren="关闭" defaultChecked />

      <Select
        defaultValue="en"
        style={{
          width: 120,
        }}
        onChange={(val) => setToVal(val)}
      >
        <Option value="zh-CHS">中文</Option>
        <Option value="yue">粤语</Option>
        <Option value="en">英语</Option>
        <Option value="ko">韩文</Option>
        <Option value="zh-CHT">中文繁体</Option>
        <Option value="fr">法文</Option>
        <Option value="es">西班牙文</Option>
        <Option value="it">意大利文</Option>
      </Select>
    </div>
  )
}
